<template>
  <MChart ref="chart" class="chart" />
</template>

<script>
export default {
  name: 'ProgressDashboard'
}
</script>
<script setup>
/**
 *     @desc    进度仪表盘图表
 *     @author  阳坤
 *
 * **/
import { ref, onMounted, defineProps, watch, toRefs, reactive } from 'vue'

const props = defineProps({
  progressData: {
    type: [String, Number],
    default: 0
  }
})

const chart = ref(null)
// 初始化
const init = () => {
  chart.value.init(progressOption)
}

onMounted(() => {
  init()
})

watch(
  () => props.progressData,
  (newVal, oldVal) => {
    setTimeout(() => {
      progressOption.series[0].data = [newVal]
      init()
    })
  }
)

const progressOption = reactive({
  series: [
    {
      type: 'gauge',
      center: ['50%', '90%'],
      radius: '160%',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 12,
      itemStyle: {
        color: '#266BF4'
      },
      progress: {
        show: true,
        roundCap: true,
        width: 8
      },
      pointer: {
        show: false
      },
      axisLine: {
        roundCap: true,
        lineStyle: {
          width: 8
        }
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: props.progressData
    }
  ]
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
